<template>
  <div class="member-order-page">
    <!-- tabs组件 -->
    <Tabs v-model="activeName" @tab-click="tabClick">
      <TabsPanel
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
      </TabsPanel>
    </Tabs>
    <!-- 订单列表 -->
    <div class="order-list">
      <div v-if="loading" class="loading"></div>
      <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
      <OrderItem 
        v-for="item in orderList" 
        :key="item.id" 
        :order="item" 
        @on-cancel="handlerCancel"
        @on-delete="handlerDelete"
        @on-confirm="handlerConfirm"
        @on-logistics="handlerLogistics"
      />
    </div>
    <Pagination
      v-if="total > reqParams.pageSize"
      @current-change="reqParams.page=$event"
      :total="total"
      :page-size="reqParams.pageSize"
      :current-page="reqParams.page" 
    />
    <!-- 取消原因组件 -->
    <Teleport to="#model">
      <OrderCancel ref="orderCancelCom" />
    </Teleport>
    <!-- 查看收货 -->
    <Teleport to="#model">
      <OrderLogistics ref="logisticsOrderCom" />
    </Teleport>
  </div>
</template>
<script setup>
import Tabs from '@/components/tabs'
import TabsPanel from '@/components/tabs-panel'
import Pagination from '@/components/pagination'
import { reactive, ref, watch } from 'vue'
import { orderStatus } from '@/api/constants'
import OrderItem from './order-item'
import OrderCancel from './order-cancel'
import OrderLogistics from './order-logistics'
import { confirmOrder, deleteOrder, findOrderList  } from '@/api/order'
import Swal from 'sweetalert2'
  const activeName = ref('all')

  // 筛选条件
  const reqParams = reactive({
    page: 1,
    pageSize: 5,
    orderState: 0
  })
  const orderList = ref([])
  const loading = ref(false)
  const total = ref(0)

  const getOrderList = () => {
    loading.value = true
    findOrderList(reqParams).then(data => {
      orderList.value = data.result.items
      total.value = data.result.counts
      loading.value = false
    })
  }
  // 筛选条件变化重新加载
  watch(reqParams, () => {
    getOrderList()
  }, { immediate: true })

  // 点击选项卡
  const tabClick = ({ index }) => {
    reqParams.page = 1
    reqParams.orderState = index
  }

  // 删除订单
  const handlerDelete = (order) => {
    Swal.fire({
      title:'删除订单',
      text:'亲，确定要删除该订单吗？',
      icon:'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: '确定',
      cancelButtonText:'取消'
    }).then((result) => {
      if (result.value) {
        deleteOrder([order.id]).then(() => {
          Swal.fire({
            title:'删除成功！',
            text:'订单已被删除！',
            icon:'success',
            showConfirmButton: false,
            timer: 1500
          })
          getOrderList()
        })
      }
    })
  }
  // 组件实例
  const orderCancelCom = ref(null)
  // 取消订单
  const handlerCancel = (order) => {
    orderCancelCom.value.open(order)
  }
  // 确认收货
  const handlerConfirm = (order) => {
    Swal.fire({
      title:'收货',
      text:'您确认收到货吗？确认后货款将会打给卖家。',
      icon:'info',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: '确定',
      cancelButtonText:'取消'
    }).then((result) => {
      if (result.value) {
        confirmOrder(order.id).then(() => {
          Swal.fire({
            title:'收货成功！',
            text:'确认收货成功！',
            icon:'success',
            showConfirmButton: false,
            timer: 1500
          })
         // 确认收货后状态变成 待评价
          order.orderState = 4
        })
      }
    })
  }
  // 查看收货
  const logisticsOrderCom = ref(null)
  const handlerLogistics = (item) => {
    logisticsOrderCom.value.open(item)
  }

</script>
<style scoped lang="less">
.member-order {
  height: 100%;
  background: #fff;
}
.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
  min-height: 400px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>
